<template>
  <div class="content">
    <div class="app-top">
      <div class="back" @click="back">返回</div>
      <div class="title">商品详情</div>
      <div></div>
    </div>
    <div class="app-details">
      <div class="app-details_img">
        <img :src="hotDetails.image" alt="#">
      </div>
    </div>
    <div class="app-details_price">
      <span>￥</span><span class="price">{{hotDetails.money}}</span>
      <div class="spell"><span class="s_1">2</span><span class="s_2">人拼</span></div>
      <div class="already">已拼<span>{{hotDetails.number}}</span>万件</div>
      <div class="originalPrice"><s>￥<span>99.00</span></s></div>
    </div>
    <div class="commodity">
      <div class="commodity-top">
        <div class="commodity-top_left">
          <span>自营</span>
          <span>包邮</span>
          {{hotDetails.word}}
        </div>
        <div class="commodity-top_right">
          <span>关注</span>
          <span>分享</span>
        </div>
      </div>
      <div class="commodity-middle">
        <span>壶身整体</span>
        <span>食品接触用</span>
      </div>
      <div class="commodity-bottom">
        <span>服务</span>
        <span>商品包邮</span>
        <span>7天无理由退货</span>
        <span></span>
      </div>
    </div>
    <div class="app-participation">
        <div class="app-participation_title">
          直接参与可快速成团
        </div>
        <div class="app-participation_box">
          <div class="user">
            <span></span>
            <span>135****1448</span>
          </div>
          <div class="need">
            <div class="need_box">
              <div>还差<span>1人</span>成团</div>
              <div>距结束 15:29:50.<span>1</span></div>
            </div>
          </div>
          <div class="join">
            立即参与
          </div>
        </div>
        <div class="app-participation_box">
          <div class="user">
            <span></span>
            <span>135****1448</span>
          </div>
          <div class="need">
            <div class="need_box">
              <div>还差<span>1人</span>成团</div>
              <div>距结束 15:29:50.<span>1</span></div>
            </div>
          </div>
          <div class="join">
            立即参与
          </div>
        </div>
      </div>
    <div class="app-select">
      <span>选择</span>
      <span>1.5L经典珍珠白</span>
      <span>1件</span>
      <span></span>
    </div>
    <div class="app-location">
      <div>
        <span>送至</span>
        <span>湖北</span>
        <span>武汉市</span>
        <span>江汉区</span>
        <span></span>
      </div>
      <div>11点前成团，预计今天（6月10号）送达</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'detail',
  data() {
    return {
      hotDetails: [],
    };
  },
  methods: {
    back() {
      this.$router.push({ path: '/index/hot' });
    },
  },
  created() {
    this.hotDetails = this.$route.query;
  },
};
</script>

<style scoped lang="scss">
  .content{
    width: 100vw;
    padding-top: 13.5vw;
    background: #f2f2f2;
    .app-top{
      width: 100vw;
      line-height: 150px;
      font-size: 0;
      border-bottom: 5px solid #dcdcdc;
      position: fixed;
      top: 0;
      background: white;
      div{
        display: inline-block;
        width: 20%;
        font-size: 50px;
        text-align: center;
      }
      .title{
        width: 60%;
      }
    }
    .app-details{
      width: 100vw;
      .app-details_img{
        width: 100vw;
        height: 1238px;
        img{
          height: inherit;
          width: inherit;
          object-fit: cover;
        }
      }
    }
    .app-details_price{
      width: 100vw;
      height: 200px;
      background: url("./icons/154803967516466376.png") no-repeat;
      background-size: 100vw;
      padding: 35px 50px;
      box-sizing: border-box;
      div{
        display: inline-block;
        font-size: 40px;
        color: white;
      }
      span{
        color: white;
      }
      .price{
        font-size: 62px;
      }
      .spell{
        width: 135px;
        line-height: 54px;
        border-radius: 10px;
        border: 5px solid white;
        background: transparent;
        margin-left: 5px;
        span{
          text-align: center;
          display: inline-block;
        }
        .s_1{
          width:40%;
          background: white;
          color: #eb4f3f;
        }
        .s_2{
          width: 60%;
        }
      }
      .originalPrice{
        display: block;
      }
      .already{
        width: 237px;
        float: right;
        overflow: hidden;
      }
      s{
        color: #f6c5b3;
      }
    }
    .commodity{
      width: 100vw;
      height: 419px;
      padding: 40px 50px 60px;
      box-sizing: border-box;
      background: white;
      .commodity-top{
        width: 1142px;
        font-size: 50px;
        font-weight: bolder;
        div{
          display: inline-block;
          vertical-align: middle;
        }
        .commodity-top_left{
          width: 920px;
          span{
            display: inline-block;
            width: 105px;
            line-height: 50px;
            background: #ec672b;
            border-radius: 20px;
            margin-right: 25px;
            font-size: 25px;
            text-align: center;
            color: white;
          }
        }
        .commodity-top_right{
          width: 200px;
          font-size: 35px;
          color: #979797;
          span{
            display: inline-block;
            width: 7.48387vw;
            height: 100px;
            padding-top: 7.24194vw;
            box-sizing: border-box;
          }
          span:nth-child(1){
            background: url("./icons/notFav.png") no-repeat;
            background-size: 5.83871vw;
          }
          span:nth-child(2){
            background: url("./icons/proShare.png") no-repeat;
            background-size: 5.83871vw;
          }
        }
      }
      .commodity-middle{
        line-height: 110px;
        font-size: 40px;
        color: #666666;
      }
      .commodity-bottom{
        span{
          font-size: 37px;
          color: black;
          display: inline-block;
          text-align: right;
          margin-right: 36px;
        }
        span:nth-child(1){
          font-size: 45px;
          color: #999999;
          width: 95px;
        }
        span:nth-child(2){
          font-size: 45px;
          width: 240px;
          background: url("./icons/ok.png") no-repeat 0 5px;
          background-size: 40px;
        }
        span:nth-child(3){
          font-size: 45px;
          width: 350px;
          background: url("./icons/ok.png") no-repeat 0 5px;
          background-size: 40px;
        }
        span:nth-child(4){
          width: 2.80645vw;
          height: 2.80645vw;
          transform: rotate(45deg);
          border: 2px solid #b1b1b1;
          border-color: #b1b1b1 #b1b1b1 transparent  transparent;
          float: right;
          overflow: hidden;
        }
      }
    }
    .app-participation{
      width: 100vw;
      height: 534px;
      margin-top: 33px;
      background: white;
      font-size: 44px;
      color: #333333;
      padding-left: 50px;
      box-sizing: border-box;
      .app-participation_title{
        line-height: 143px;
        border-bottom: 3px solid #f4f4f4;
        font-size: 46px;
        font-weight: bolder;
      }
      .app-participation_box{
        height: 198px;
        .user{
          width: 418px;
          display: inline-block;
          span:nth-child(1){
            display: inline-block;
            width: 114px;
            height: 114px;
            border: 2px solid #dddddd;
            border-radius: 50%;
            position: relative;
            top: 3vw;
          }
        }
        .need{
          width: 471px;
          display: inline-block;
          .need_box{
            text-align: right;
            position: relative;
            top: 2.80645vw;
          }
        }
        .join{
          width: 226px;
          line-height: 106px;
          background: #eb6143;
          border-radius: 15px;
          display: inline-block;
          text-align: center;
          color: white;
          margin-left: 15px;
        }
      }
    }
    .app-select{
      background: white;
      line-height: 166px;
      padding: 0 50px;
      box-sizing: border-box;
      margin-top: 33px;
      span{
        display: inline-block;
        margin-right: 40px;
        font-size: 35px;
      }
      span:nth-child(1){
        color: #999999;
      }
      span:nth-child(4){
        width: 2.80645vw;
        height: 2.80645vw;
        border: 2px solid #a4a4a4;
        border-color: #a4a4a4 #a4a4a4 transparent transparent;
        transform: rotate(45deg);
        position: relative;
        left: 38.80645vw;
      }
    }
    .app-location{
      margin-top: 33px;
      background: white;
      padding: 0 50px;
      box-sizing: border-box;
      div{
        line-height: 120px;
      }
      div:nth-child(1){
        span{
          display: inline-block;
          margin-right: 40px;
          font-size: 35px;
        }
        span:nth-child(1){
          color: #999999;
        }
        span:nth-child(5){
        width: 2.80645vw;
        height: 2.80645vw;
        border: 2px solid #a4a4a4;
        border-color: #a4a4a4 #a4a4a4 transparent transparent;
        transform: rotate(45deg);
        position: relative;
        left: 35.80645vw;
        top: 4.6129vw;
      }
      }
      div:nth-child(2){
        font-size: 35px;
        text-indent: 10.6129vw;
      }
    }
  }
</style>
